
<script>
export default {
  components: {},
  data() {
    return {

    };
  },
  props: {
    value: null,
    authPrivs: {
      type: Array,
      default: () => []
    },

  },

  render: function (h) {
    const authList = this.authPrivs.map((auth, i) => {
      return (<div class="auth_out auth_div  pd_v1 auth_border_bottom2" key={i}>
        {this.renderItem(h, auth, i)}
      </div>)
    }

    )

    return h('el-checkbox-group', {
      props: {
        value: this.value,
      },
      on: this.$listeners,
    }, authList)

  },
  methods: {
    renderItem(h, item, index) {
      let divs = null
      let label = (<label class=" auth_label">{this.$tt(item.module || item.name)}</label>)
      let privs = null
      const authCode = item.alias || item.path
      if (!_.isEmpty(item.children)) {
        divs = (<div class="flex_cell auth_childitem pd_l1" >
          {item.children.map((it, i) => this.renderItem(h, it, i))}
        </div>)
      } else if (authCode) {
        label = (
          <el-checkbox label={authCode} class='auth_checkbox '>
            {this.$tt(item.module || item.name)}
          </el-checkbox>
        )
        if (!_.isEmpty(item.privs)) {

          privs = (
            <div class="flex_auto privs_border ">
              {item.privs.map((p, i) => {
                let description = null
                if (p.description) {
                  description = (
                    <el-popover placement="top" width="240"
                      trigger="hover">
                      {this.$tt(p.description)}
                      <i slot="reference" class="el-icon-question mg_l2" style="cursor: pointer"></i>
                    </el-popover>
                  )
                }

                return (
                  <el-checkbox label={p.code} key={i}>
                    {this.$tt(p.label)}
                    {description}
                  </el-checkbox>
                )
              })
              }
            </div >
          )
        }
      }

      return (<div class="flex_row  auth_border_bottom flex_cell" key={index}>
        {label}
        {privs}
        {divs}
      </div>)
    }
  }
};
</script>
<style>
.auth_out {
  font-size: 14px;
  margin-left: 40px;

  color: #000;
}

.auth_checkbox {
  /*width: 160px;*/
  /*white-space: pre-wrap;*/
  /*flex-flow: row;*/
  /*display: flex;*/
  /*align-items: center;*/
}

.auth_border_bottom {
  border-bottom: 1px dashed rgb(220, 223, 230);
  line-height: 40px;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
}

.auth_border_bottom .el-checkbox__label{
  line-height: 40px;
}

.auth_border_bottom .el-checkbox{
  width: 140px;
  margin-right: 20px;
}

.auth_border_bottom2 {
  border-bottom: 2px dashed rgb(220, 223, 230);
}

.privs_border {
  /*border: 1px solid #d7dae2;*/
  /*border-radius: 4px;*/
}

.auth_border_bottom:last-child,
.auth_border_bottom2:last-child {
  border-bottom: none;
}

.auth_label {
  width: 130px;
  white-space: pre-wrap;
  word-break: break-all;
}

.auth_childitem {
  border-left: 1px dashed rgb(220, 223, 230);
}




</style>
